<template>
	<div class="update-pwd-container">
		<el-dialog title="温馨提示" :visible.sync="showChangePwd" :closeOnClickModal="false" @closed="closed">
			<div class="header-title" v-show="isExpired">您当前使用的登录密码已过期，请更新密码！</div>
			<div class="header-title" v-show="isInit">您当前使用的登录密码是初始密码，请更新密码！</div>
			<el-form :model="userInfo" status-icon :rules="pwdRules" ref="pwdForm" label-width="100px">
				<el-form-item label="新密码" prop="pass">
					<el-input type="password" v-model="userInfo.pass" autocomplete="off" show-password></el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="checkPass">
					<el-input type="password" v-model="userInfo.checkPass" autocomplete="off" show-password></el-input>
				</el-form-item>
			</el-form>
			<div class="btns">
				<el-button @click="showChangePwd = false">取消</el-button>
				<el-button @click="updatePassword" type="primary">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'UpdatePwd',
	props: {
		showChangePwd: {
			type: Boolean,
			default: false
		},
		isInit: {
			type: Boolean,
			default: false
		},
		isExpired: {
			type: Boolean,
			default: false
		}
	},
	data() {
		const validatePassChecked = (rule, value, callback) => {
			const chineseRegex = /[\u4e00-\u9fff]/;
			if (chineseRegex.test(value)) {
				callback(new Error('格式错误，用户名只能是英文、数字以及 - @ ~ _ 等特殊字符'));
				return;
			}
			if (!value || value.length < 8) {
				callback(new Error('密码强度不足，密码长度至少8个字符，且必须包含大、小写字母、数字、特殊字符'));
			} else if (value !== this.userInfo.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				const uppercaseRegex = /[A-Z]/;
				const lowercaseRegex = /[a-z]/;
				const specialCharRegex = /[!@#$%^&*_\-+={}\[\]\\|;:"'<>,.\/?]/;
				const digitRegex = /[0-9]/;
				let matchNum = 0;
				if (uppercaseRegex.test(value)) matchNum++;
				if (lowercaseRegex.test(value)) matchNum++;
				if (specialCharRegex.test(value)) matchNum++;
				if (digitRegex.test(value)) matchNum++;
				if (matchNum < 4) {
					callback(new Error('密码强度不足，密码长度至少8个字符，且必须包含大、小写字母、数字、特殊字符'));
				} else {
					callback();
				}
			}
		};

		const validatePass = (rule, value, callback) => {
			const chineseRegex = /[\u4e00-\u9fff]/;
			if (chineseRegex.test(value)) {
				callback(new Error('格式错误，用户名只能是英文、数字以及 - @ ~ _ 等特殊字符'));
				return;
			}
			if (!value || value.length < 8) {
				callback(new Error('密码强度不足，密码长度至少8个字符，且必须包含大、小写字母、数字、特殊字符'));
			} else {
				const uppercaseRegex = /[A-Z]/;
				const lowercaseRegex = /[a-z]/;
				const specialCharRegex = /[!@#$%^&*_\-+={}\[\]\\|;:"'<>,.\/?]/;
				const digitRegex = /[0-9]/;
				let matchNum = 0;
				if (uppercaseRegex.test(value)) matchNum++;
				if (lowercaseRegex.test(value)) matchNum++;
				if (specialCharRegex.test(value)) matchNum++;
				if (digitRegex.test(value)) matchNum++;
				if (matchNum < 4) {
					callback(new Error('密码强度不足，密码长度至少8个字符，且必须包含大、小写字母、数字、特殊字符'));
				} else {
					callback();
				}
			}
		};
		return {
			userInfo: {
				userId: '',
				pass: '',
				checkPass: ''
			},
			pwdRules: {
				pass: [
					{ required: true, message: '请输入用户密码', trigger: ['blur', 'change'] },
					{ validator: validatePass, trigger: ['blur', 'change'] }
				],
				checkPass: [
					{ required: true, message: '请输入用户密码', trigger: ['blur', 'change'] },
					{ validator: validatePassChecked, trigger: ['blur', 'change'] }
				]
			}
		};
	},
	methods: {
		updatePassword() {
			this.$refs.pwdForm.validate(valid => {
				if (valid) {
					this.$emit('updatePwd', this.userInfo.pass);
				} else {
					return false;
				}
			});
		},
		closed() {
			console.log('updatePwd closed');
			this.$emit('closed');
		}
	},
	watch: {
		showChangePwd(val) {
			if (val) {
				this.$nextTick(() => {
					this.$refs.pwdForm.resetFields();
				});
			}
		}
	}
};
</script>

<style scope lang="less">
.update-pwd-container {
	.el-form-item {
		input {
			background: none !important;
			border: 1px solid #dcdfe6 !important;
			color: #000 !important;
		}
		.el-input__inner {
			padding: 0 5px !important;
		}
		input::-webkit-input-placeholder {
			color: #dcdfe6 !important;
		}
		input::-moz-input-placeholder {
			color: #dcdfe6 !important;
		}
		input::-ms-input-placeholder {
			color: #dcdfe6 !important;
		}
	}
}
.header-title {
	text-align: left;
	margin-bottom: 10px;
	/* font-size: 16px; */
}
.btns {
	text-align: right;
}
</style>
